<script lang="ts" setup>
import { assignObject } from '@/utils/object';
import { onMounted, reactive,watch } from 'vue'
const props = defineProps({
  item: {
    type: Object,
    required: true,
    default: () => ({})
  }
})
const DeviceInformation = reactive({
  id: null,
  primaryType: '',
  secondaryType: '',
  thirdType: '',
  vendor: '',
  version: '',
  desc: '',
  model: '',
  modelNum: '',
  tag: '',
  name: ''
})
const modifyString = (Str: string) => {
  return Str
    .replace(/^["<br> \n\r]+|["\n\r]+$/g, '')
    .replace(/^\\n/g, '')
    .replace(/(?:\\r\\n|\\r|\\n)+/g, '<br>')
    .replace(/\\"|\\/g, '')
    .replace(/: <br> /g, ':')
    .replace(/\s*<br\s*\/?>\s*/gi, '\n').trim() //textarea文本域识别\n
};
// 首次获值
onMounted(()=>{
  assignObject(DeviceInformation,props.item.deviceInformation)
})
// 第二次操作有值
watch(()=>props.item,(newItem)=>{
  const {deviceInformation} = newItem
  assignObject(DeviceInformation,deviceInformation)
})
</script>

<template>
  <jm-form label-width="auto" style="max-width: 600px;">
    <jm-form-item label="ID">
      <jm-input :value="props.item.id" readonly />
    </jm-form-item>
    <jm-form-item label="设备IP">
      <jm-input :value="props.item.ip" readonly />
    </jm-form-item>
    <jm-form-item label="端口">
      <jm-input :value="props.item.port" readonly />
    </jm-form-item>
    <jm-form-item label="操作系统">
      <jm-input :value="props.item.os" readonly />
    </jm-form-item>
    <jm-form-item label="更新时间">
      <jm-input :value="props.item.updateTime" readonly />
    </jm-form-item>
    <jm-form-item label="协议">
      <jm-input :value="props.item.protocol" readonly />
    </jm-form-item>
    <jm-form-item label="服务">
      <jm-input :value="props.item.service" readonly />
    </jm-form-item>
    <jm-form-item label="任务ID">
      <jm-input :value="props.item.taskId" readonly />
    </jm-form-item>
    

    <jm-form-item label="简介">
      <jm-input :value="props.item.desc" readonly />
    </jm-form-item>

    <jm-form-item label="名称">
      <jm-input :value="DeviceInformation.name" readonly />
    </jm-form-item>
    <jm-form-item label="一级标签">
      <jm-input :value="DeviceInformation.primaryType" readonly />
    </jm-form-item>
    <jm-form-item label="二级标签">
      <jm-input :value="DeviceInformation.secondaryType" readonly />
    </jm-form-item>
    <jm-form-item label="三级标签">
      <jm-input :value="DeviceInformation.thirdType" readonly />
    </jm-form-item>
    <jm-form-item label="来源">
      <jm-input :value="DeviceInformation.vendor" readonly />
    </jm-form-item>
    <jm-form-item label="版本">
      <jm-input :value="DeviceInformation.version" readonly />
    </jm-form-item>
    <jm-form-item label="设备简介">
      <jm-input :value="DeviceInformation.desc" readonly />
    </jm-form-item>
    <jm-form-item label="型号">
      <jm-input :value="DeviceInformation.model" readonly />
    </jm-form-item>
    <jm-form-item label="型号版本">
      <jm-input :value="DeviceInformation.modelNum" readonly />
    </jm-form-item>
    <jm-form-item label="标签">
      <jm-input :value="DeviceInformation.tag" readonly />
    </jm-form-item>

    <jm-form-item label="经度">
      <jm-input :value="props.item.longitude" readonly />
    </jm-form-item>
    <jm-form-item label="纬度">
      <jm-input :value="props.item.latitude" readonly />
    </jm-form-item>
    <jm-form-item label="漏洞相关">
      <jm-input :value="props.item.vul" readonly />
    </jm-form-item>

    <jm-form-item label="banner">
      <jm-input :value="modifyString(props.item.banner).trim()" :rows="15" type="textarea" readonly/>
    </jm-form-item>
  </jm-form>
</template>
<style lang="scss" scoped>
</style>